<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary">添加分类</el-button>
      <el-table :data="catelist" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column  prop="cat_name" label="分类名称" width="180px"></el-table-column>
        <el-table-column  label="是否有效" width="180px"></el-table-column>
        <el-table-column  label="排序" width="180px"></el-table-column>
        <el-table-column  label="操作" width="280px"></el-table-column>
      </el-table>

      <el-pagination @size-change="" @current-change=""
        :current-page="queryInfo.pagenum" :page-sizes="[1, 3, 5,10]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        catelist: [],
        total:0,
        queryInfo: {
          type: 3,
          pagesize: 5,
          pagenum: 1
        }
      }
    },
    created() {
      this.getCateList()
    },
    methods: {
      async getCateList() {
        const {
          data: res
        } = await this.$http.get('categories', {
          params: this.queryInfo
        })
        if(res.meta.status!==200) { return this.$message.error('获取商品分类失败')}
        this.$message.success('获取商品分类成功')
        this.catelist = res.data.result
        this.total = res.data.total
        console.log(res)
      }
    }
  }
</script>

<style>
</style>
